<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
    <!-- 使用innerHTML -->
    <p id="msg"></p>
    <p id="output"></p>
    <script>
        //在元素中写入文本字符串
        document.getElementById("msg").innerHTML = "Hello World";

        //在元素中写入数字
        document.getElementById("output").innerHTML = 20 + 30;
    </script>


    <!-- 使用document.write -->


    <!-- 法一 -->
    <p>document.write()方法将文本字符串写入文档流</p>
    <script>
        document.write("Hello World<br>");
        document.write(20 + 30);
    </script>


    <!-- 法二 -->
    <p>这是第一段</p>
    <p>这是第二段</p>
    <button onclick="myFUnc()">click</button>
    <script>
        function myFUnc() {
            document.write("<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>");
        }
    </script>

    <!-- 使用window.alert() -->
    <p>点击按钮,弹出警告框</p>
    <button onclick="alert('111');">alert</button>

    <!-- 使用console.log -->
    <p>在键盘上按下F12以查看浏览器控制台的消息</p>
    <script>
        console.log("1111");
        console.log(20 + 30);
    </script>
</body>

</html>